<template>
  <el-dialog :title="isEdit?'编辑流程配置规则':'新增流程配置规则'"
             :visible.sync="dialogForm"
             width="800px">
    <el-form :inline="true"
             :model="form"
             ref="form"
             v-loading="loading"
             class="search-form"
             :rules="rules"
             label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="流程规则名称："
                        prop="ruleName">
            <el-input v-model="form.ruleName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属单位"
                        prop="orgId">
            <auto-search-org v-model="form.orgId"
                             @select="v=>{form.orgId=v;form.deptId='';form.deptName=''}"
                             @selectName="v=>form.orgName=v"
                             :disabled="true"
                             :name="form.orgName"></auto-search-org>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务模式："
                        prop="businessModule">
            <el-select v-model="form.businessModule"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictWorkMode"
                         :key="key"
                         :label="val"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="流程规则描述：">
            <el-input type="textarea"
                      :rows="3"
                      style="width: 570px"
                      :maxLength="255"
                      placeholder="请输入内容"
                      v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="规则条件："
                        prop="factors">
            <div v-for="(item,index) in form.factors"
                 :key="index">
              <!-- :disabled="!form.businessModule" -->
              <el-select v-model="item.attrCode"
                         style="width: 120px"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="(item1,index1) in ruleConditionList"
                           :key="index1"
                           :label="item1.attrName"
                           :value="item1.attrCode">
                </el-option>
              </el-select>
              <!-- 操作符  @change="handleChangeOp(item,index)"-->
              <el-select v-model="item.operator"
                         style="width: 120px"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="[key, val] in _dictOperatorTwoType"
                           :key="key"
                           :label="val"
                           :value="key">
                </el-option>
              </el-select>
              <!-- 第二条件 -->
              <!--SELECT-->
              <el-select v-if="isSelectFn(item.attrCode)"
                         v-model="item.attrVal"
                         placeholder="请选择">
                <el-option v-for="[key,val] in _dictTransportModeType"
                           :key="key"
                           :label="val"
                           :value="key">
                </el-option>
              </el-select>
              <!--TEXT-->
              <el-input v-else
                        style="width: 188px"
                        v-model="item.attrVal"></el-input>
              <!-- <el-select v-model="item.isExistSub"
                         style="width: 120px"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="[key, val] in _dictRuleConnect"
                           :key="key"
                           :label="val"
                           :value="key">
                </el-option>
              </el-select> -->
              <el-button v-if="index===form.factors.length-1"
                         @click="form.factors.push({ attrCode: '', attrName:'', operator: '', attrVal: '', isExistSub:'AND' })"
                         type="text"
                         icon="el-icon-plus"
                         size="medium"></el-button>
              <el-button v-if="index!==form.factors.length&&form.factors.length>1"
                         @click="form.factors.splice(index,1)"
                         type="text"
                         icon="el-icon-minus"
                         style="color: red"
                         size="medium"></el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="作业节点:"
                        prop="details">
            <el-table :data="form.details"
                      border
                      stripe>
              <el-table-column label="序号"
                               min-width="50">
                <template slot-scope="scope">
                  {{ scope.$index+1 }}
                </template>
              </el-table-column>
              <el-table-column prop="nodeCode"
                               label="节点名称"
                               min-width="220">
                <template slot-scope="scope">
                  <select-node v-model="scope.row.nodeCode"
                               @selectName="v=>scope.row.nodeName=v"
                               :name="scope.row.nodeName"></select-node>
                  <!-- <el-select v-model="scope.row.nodeCode"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="(item,index) in flowRuleList"
                             :key="index"
                             :label="item.nodeName"
                             :value="item.nodeCode"></el-option>
                </el-select> -->
                </template>
              </el-table-column>
              <el-table-column fixed="right"
                               align="center"
                               label="操作"
                               width="120">
                <template slot-scope="scope">
                  <el-button size="small"
                             type="text"
                             @click="handleAddTable(scope.row)">复制</el-button>
                  <el-button :disabled="form.details.length===1"
                             type="text"
                             class="danger"
                             size="small"
                             @click="handleRemove(scope.$index)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addProcessRule,
  updateProcessRule,
  getRuleConditionList,
  getFlowRuleList
} from '@/api/processRule/processRule'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import selectNode from '@/components/select/selectNode'
import { maxLength, normalLength, sortLength } from '@/utils/rules'
import { PUBLIC_NUMBER_NULL, REG_CHINESE } from '@/utils/Reg'

export default {
  name: 'processRuleAddForm',
  components: { autoSearchOrg, selectNode },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        // orgId: [{ message: '请选择单位', trigger: 'change' }],
        ruleName: [
          { required: true, validator: REG_CHINESE, message: '请输入流程规则名称',trigger: 'change' },
          sortLength
        ],
        businessModule: [
          { required: true, message: '请选择业务模式', trigger: 'change' }
        ],
        factors: [
          { required: true, message: '请选择规则条件', trigger: 'change' }
        ],
        details: [{ required: true, message: '请选择节点', trigger: 'change' }],
        textarea: [maxLength]
      },
      ruleList: [],
      isClick: true,
      isShow: true,
      isHide: true,
      disabled: true,
      lock: true,
      loading: false,
      create: true,
      dialogForm: false,
      isEdit: false,
      flowRuleList: null,
      ruleConditionList: null
    }
  },
  mounted() {
    getFlowRuleList().then(res => {
      this.flowRuleList = res.data.aaData
    })
    getRuleConditionList().then(res => {
      this.ruleConditionList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        ruleName: '',
        businessModule: '',
        remark: null,
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        factors: [
          {
            attrCode: '',
            attrName: '',
            attrVal: '',
            operator: '',
            displayType: ''
          }
        ],
        details: [{ sortNo: 1, nodeCode: '', nodeName: '' }]
      }
    },
    //select与input框切换
    isSelectFn(val) {
      if (this.ruleConditionList) {
        for (let i = 0; i < this.ruleConditionList.length; i++) {
          if (this.ruleConditionList[i].attrCode === val) {
            return this.ruleConditionList[i].displayType === 'SELECT'
          }
        }
        return false
      }
    },
    handleAddTable(item) {
      let params = { ...item }
      params.sortNo = this.form.details.length + 1
      this.form.details.push(params)
    },
    handleRemove(index) {
      if (this.form.details.length === 1) {
        this.$message({ message: '至少需要一条数据!', type: 'error' })
      } else {
        this.form.details.splice(index, 1)
      }
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleEdit() : this.handleAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    handleAdd() {
      const tempData = Object.assign({}, this.form)
      tempData.factors.forEach((item, index) => {
        item.displayType = 'SELECT'
      })
      addProcessRule(tempData).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
      })
    },
    handleEdit() {
      updateProcessRule(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
.show {
  display: inline-block;
}
.hide {
  display: none;
}
</style>
